<script setup>
	import {
		ref,
		defineEmits
	} from 'vue'
	import {
		useRoute
	} from 'vue-router'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import store from '@/store/index'
	import HeaderNavTabarVue from '@/components/HeaderNavTabar/HeaderNavTabar.vue'
	import Folder from '@/static/icon/tongxunlu/companyMoren.png'
	const emit = defineEmits(['goViewDept'])
	onLoad((v) => {
		let data = JSON.parse(decodeURIComponent(v.item))
		viewTitle.value = data.label
		cardData.value = data.children
	})
	var pages = getCurrentPages();
	const goView = (item) => {
		store._mutations.setOptionDept1[0](item)

		// 传递选择的部门
		uni.$emit('getOptionDept', item);
		uni.navigateBack({
			delta: 2
		})
	}
	const viewTitle = ref('通讯录')
	const cardData = ref([])
</script>

<template>
	<HeaderNavTabarVue :title="viewTitle" />
	<view class="detail-box">
		<view v-for="(item, index) in cardData" :key="index" class="msg-list" @tap="goView(item)">
			<view class="list-left">
				<view class="imageWrapper">
					<image :src="Folder"></image>
				</view>
				<view class="list-right">
					<view class="msg-type-author">
						<h4>{{ item.label }}</h4>
					</view>
					<text>{{ item.infoMsg }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	@import '@/static/style/index.scss';

	.detail-box {
		.time-box {
			margin: 32rpx 24rpx;
			color: #86909c;
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
		}

		.msg-list {
			@include flex($align: center, $justify: space-between);
			background-color: #fff;
			height: 108rpx;
			padding: 0 $spacing-row-base;

			&:active {
				background-color: #eff0f2;
			}

			.list-left {
				@include flex($align: center);

				.imageWrapper {
					@include flex($align: center, $justify: space-between);
					// background-color: #e8f3ff;
					// padding: 10rpx;
					margin-right: 16rpx;
					// border-radius: 32rpx;
				}

				image {
					// width: 42rpx;
					// height: 42rpx;
					// border-radius: 50%;
					width: 64rpx;
					height: 64rpx;
					border-radius: 12rpx;
				}

				.msg-type-author {
					@include flex($align: center);

					h4 {
						margin-right: 16rpx;
						color: #000000;
						font-family: 'PingFang SC';
						font-size: 32rpx;
						font-style: normal;
						font-weight: 400;
						line-height: 44.8rpx;
					}

					p {
						text-align: center;
						font-family: 'PingFang SC';
						font-size: 20rpx;
						font-style: normal;
						font-weight: 500;
						padding: 3rpx 8rpx;
						border-radius: 4rpx;
					}
				}

				text {
					align-self: stretch;
					color: #86909c;
					font-family: 'PingFang SC';
					font-size: 24rpx;
					font-style: normal;
					font-weight: 400;
					line-height: 33.6rpx;
					margin-top: 8rpx;
				}
			}

			.time-txt {
				color: #86909c;
				text-align: right;
				font-family: 'PingFang SC';
				font-size: 28rpx;
				font-style: normal;
				font-weight: 400;
				line-height: 39.2rpx;
			}
		}
	}
</style>